<template>
  <div class="form-single-fragment" style="position: relative">
    <div class="task-title">
      <div>
        <span class="text">招聘申请</span>
        <el-tag effect="dark" size="mini" type="success"
          >当前节点：启动流程</el-tag
        >
        <!-- <el-tag  effect="dark" size="mini" type="info">{{'发起人：'}}</el-tag> -->
      </div>
    </div>
    <div class="traval_submit">
      <el-button
        slot="operator"
        type="primary"
        size="mini"
        class="submit"
        @click="onSubmitClick"
      >
        提交
      </el-button>
    </div>
    <el-form ref="formFlowRecruit" :model="formData" class="full-width-input" :disable="readOnly"
      :rules="rules" style="width: 100%;"
      label-width="120px" size="mini" label-position="right" @submit.native.prevent>
    <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="招聘部门" prop="Recruit.deptId">
            <el-select class="input-item"
              v-if="!readOnly"
              v-model="formData.Recruit.deptId"
              :clearable="true"
              filterable
              placeholder="招聘部门"
              :loading="formFlowRecruit.deptId.impl.loading"
              @change="onDeptIdValueChange">
              <el-option v-for="item in RecruitTypeList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
            <span class="input-item input-label" v-else>{{(formData.Recruit.deptIdDictMap || {}).name}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申请原因" prop="Recruit.applyCause">
            <el-select class="input-item" v-if="!readOnly" v-model="formData.Recruit.applyCause" :clearable="true" filterable
              placeholder="申请原因" :loading="formFlowRecruit.applyCause.impl.loading"
              @change="onApplyCauseValueChange">
              <el-option v-for="item in applyCauseList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
            <span class="input-item input-label" v-else>{{(formData.Recruit.applyCauseDictMap || {}).name}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申请说明" prop="Recruit.applyExplain">
            <el-input class="input-item" v-if="!readOnly" v-model="formData.Recruit.applyExplain"
              type="textarea"
              :autosize="{minRows: 2, maxRows: 4}"
              :clearable="true" placeholder="申请说明"
            />
            <span class="input-item input-label" v-else>{{formData.Recruit.applyExplain}}</span>
          </el-form-item>
        </el-col>
    </el-row>
    </el-form>
    <el-col class="table-box gutter-bottom" :span="24">
          <el-row>
            <el-col :span="24">
              <el-row type="flex" justify="space-between" align="middle" style="margin-bottom: 15px;">
                <div class="table-title" style="padding-left: 5px; border-left: 3px solid #409EFF;">招聘明细</div>
                <!-- 表格操作 -->
                <div>
                  <el-button type="primary" size="mini" v-if="!readOnly"
                    @click="onAddRecruitDetailClick"
                  >
                    新增
                  </el-button>
                </div>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-table ref="recruitDetail" :data="tableList" size="mini"
                border
                style="margin-bottom: 20px"
                header-cell-class-name="table-header-gray"
              >
                <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
                <el-table-column label="招聘岗位" prop="postC">
                </el-table-column>
                <el-table-column label="招聘人数" prop="recruitNumber">
                </el-table-column>
                <el-table-column label="希望到岗日期" prop="arrivalDate">
                
                </el-table-column>
                <el-table-column label="招聘薪资" prop="wages">
                </el-table-column>
                <el-table-column label="招聘说明" prop="remark">
                </el-table-column>
                <el-table-column label="工作内容" prop="workContent">
                </el-table-column>
                <el-table-column label="操作" v-if="!readOnly" fixed="right">
                  <template slot-scope="{ row,$index }">
                    <el-button type="text" size="mini"
                      @click="handleClickEdit(row,$index)"
                    >
                      编辑
                    </el-button>
                    <el-button type="text" size="mini"
                      @click="handleClickDel($index)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-col>
    <label class="page-close-box">
      <el-button type="text" @click="onClose" icon="el-icon-close"></el-button>
    </label>
  </div>
</template>

<script>
import { RecruitApp} from '@/api/approve.js';
// import { mapActions } from 'vuex';

import { DropdownWidget, TableWidget } from '@/utils/widget.js';
import formEditFlowRecruitDetail from './modules/detail.vue';

/* eslint-disable-next-line */
import { findTreeNode, findTreeNodePath, findItemFromList } from '@/utils';
/* eslint-disable-next-line */
import rules from '@/utils/validate.js';

/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
/* eslint-disable-next-line */
import { FieldFlowController, DictionaryController } from '@/api';

export default {
  props: {
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        Recruit: {
          id: undefined,
          deptId: undefined, // 招聘部门
          applyCause: undefined, // 申请原因
          applyExplain: undefined, // 申请说明
          remark: undefined,
          fileUrl: undefined,
          createUserId: undefined,
          createTime: undefined,
          updateUserId: undefined, // 用户id
          updateTime: undefined,
          deletedFlag: undefined,
          recruitDetailList: [],
          isDatasourceInit: false
        }
      },
      
      // 招聘岗位
      RecruitTypeList: [],
      // 招聘明细
      tableList: [],
      // 招聘岗位
      postTypeList: [
        {id: '1', name: '主管'},
        {id: '2', name: '员工'}
      ],
      // 申请原因
      applyCauseList: [
        {id: '1', name: '员工辞退'},
        {id: '2', name: '员工离职'},
        {id: '3', name: '业务增量'},
        {id: '4', name: '新增业务'},
        {id: '5', name: '新设部门'}
      ],

      rules: {
        'Recruit.deptId': [
          {required: true, message: '请输入招聘部门', trigger: 'blur'}
        ]
      },
      formFlowRecruit: {
        formFilter: {
        },
        formFilterCopy: {
        },
        deptId: {
          impl: new DropdownWidget(this.loadDeptIdDropdownList)
        },
        applyCause: {
          impl: new DropdownWidget(this.loadApplyCauseDropdownList)
        },
        recruitDetail: {
          impl: new TableWidget(this.loadRecruitDetailWidgetData, this.loadRecruitDetailVerify, false, false)
        },
        isInit: false
      }
    }
  },
  // watch: {
  //   tableList (val) {
  //     if (val.length > 0) {
  //       let total = 0
  //       val.forEach(item => {
  //         total += Number(item.amount)
  //       })
  //       this.form.totalAmount = total
  //     } else {
  //       this.form.totalAmount = 0
  //     }
  //   }
  // },
  created () {
    this.sector()
  },
  methods: {
    getTableIndex (index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
    },
  
    // 关闭当前页面
    onClose () {
      this.$router.go(-1)
    },
    /**
     * 招聘部门选中值改变
     */
    onDeptIdValueChange (value) {
      this.formData.Recruit.deptId = this.RecruitTypeList.find((item) => item.id === value).id
    },
    /**
     * 获取部门
     */
    sector () {
      RecruitApp.section(this, {
        dictId: '1469023114837889024'
      }).then((res) => {
        this.RecruitTypeList = res.data;
      })
    },
    /**
     * 申请原因选中值改变
     */
    onApplyCauseValueChange (value) {
      this.formData.Recruit.applyCause = this.applyCauseList.find((item) => item.id === value).name
    },
    // 招聘申请-提交
    onSubmitClick (val) {
      RecruitApp.add(this, {
        recruitDto: {
          deptId: this.formData.Recruit.deptId,
          applyCause: this.formData.Recruit.applyCause,
          applyExplain: this.formData.Recruit.applyExplain
        },
        recruitDetailDtoList: [
          ...this.formFlowRecruit.recruitDetail.impl.dataList.map(item => {
            return {
              ...item
             
            }
          })
        ],
        flowTaskCommentDto: {
          approvalType: 'agree'
        },
        taskVariableData: {
          ...this.getUserInfo
        }
      }).then(res => {
        this.$message.success('提交成功')
        this.$router.go(-1)
      })
    },
    // 新增招聘明细
    onAddRecruitDetailClick () {
      sessionStorage.removeItem('recruitDetail')
      let params = {};
      
      this.$dialog.show('招聘明细', formEditFlowRecruitDetail, {
        area: '800px'
      }, params).then(res => {
        this.formFlowRecruit.recruitDetail.impl.dataList.push({
          ...res,
          // 级联添加每次添加后并不保存到数据库，设置临时的唯一值
          __cascade_add_temp_id__: new Date().getTime()
          
        });
        this.tableList = this.formFlowRecruit.recruitDetail.impl.dataList
      }).catch(e => {});
    },
   
    // 招聘明细-编辑
    handleClickEdit (row, index) {
      sessionStorage.setItem('recruitDetail', JSON.stringify(row))

      // console.log('点击编辑', row, index)
      
      let params = {};
      
      this.$dialog.show('修改招聘明细', formEditFlowRecruitDetail, {
        area: '800px'
      }, params).then(res => {
        this.formFlowRecruit.recruitDetail.impl.dataList.splice(index, 1, {
          ...res,
          // 级联添加每次添加后并不保存到数据库，设置临时的唯一值
          __cascade_add_temp_id__: new Date().getTime()
         
        });
        this.tableList = this.formFlowRecruit.recruitDetail.impl.dataList
        // console.log('编写保存后', this.formFlowRecruit.recruitDetail.impl.dataList)
      }).catch(e => {});
    },
    // 招聘明细-删除
    handleClickDel (index) {
      this.$confirm('是否删除此条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableList.splice(index, 1)
      }).catch(() => {});
    }
  }
}
</script>

<style>
.task-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 3px solid #409eff;
}
.task-title .text {
  height: 28px;
  line-height: 28px;
  font-weight: 600;
  font-size: 16px;
  color: #383838;
}
.task-title .el-tag {
  margin-left: 10px;
}
.traval_submit{
  text-align: right;
}

</style>
